<template>
    <div class="example col tcenter">
        <div class="example-name cr-2">许你一个平凡的世界</div>
        <div class="example-title">有品质的业务平台，青爱科技</div>
        <div  class="example-list rows">
            <div class="example-list-con col"  v-for="(item,index) in example" :key="index" :class="item.bg" @click="getShopIndex(index)">
                <img :src="item.img" alt="">
                <div>{{item.name}}</div>
            </div>
        </div>
    </div>
</template>


<script>
export default {
  data() {
    return {
      example: [
        {
          name: "微信商城",
          text: "体验每天都不一样的精彩人生",
          img: require("../../static/img/store.png"),
          bg: "orange",
          route: "shop"
        },
        {
          name: "微信小程序",
          text: "体验每天都不一样的精彩人生",
          img: require("../../static/img/project.png"),
          bg: "pink",
          route: "miniProgram"
        },
        {
          name: "淘宝优惠券",
          text: "体验每天都不一样的精彩人生",
          img: require("../../static/img/ticket.png"),
          bg: "blue",
          route: "ticket"
        },
        {
          name: "PPT商城",
          text: "体验每天都不一样的精彩人生",
          img: require("../../static/img/game.png"),
          bg: "red",
          route: "pptmain"
        },
        {
          name: "淘宝优惠券",
          text: "体验每天都不一样的精彩人生",
          img: require("../../static/img/ticket.png"),
          bg: "blue"
        },
        {
          name: "微信小游戏",
          text: "体验每天都不一样的精彩人生",
          img: require("../../static/img/game.png"),
          bg: "red"
        }
      ]
    };
  },
  methods: {
    getShopIndex(index) {
      console.log(index);
      console.log(111111);
    }
  }
};
</script>


<style lang="less" scoped>
.example {
  padding: 20px 10vw;
}
.example-name {
  margin-top: 20px;
  font-size: 22px;
  font-weight: bold;
}
.example-title {
  margin-top: 4px;
  margin-bottom: 10px;
  font-size: 18px;
}
.example-list {
  justify-content: space-around;
}
.example-list-con {
  width: 32%;
  height: 250px;
  transition: all 1s ease;
  position: relative;
}
.example-list-con img {
  width: 98px;
  height: 98px;
  margin: 20px auto;
}
.example-list-con span {
  color: #fff;
  font-size: 20px;
  margin-top: 2px;
}
.example-list-con:hover {
}
</style>
